<template>
  <div class="app-container">
    <div class="table-box">
      <Tables :data="list" :listLoading="listLoading" :tableTitle="tableTitle" :operationtype="operationtype" ></Tables>
      <Pagations :totalCount="totalCount" @changePage="changePage"></Pagations>
    </div>
  </div>
</template>

<script>
  import { queryServiceCardList } from '@/api/list'
  import Pagations from '@/components/pagations'
  import pagationdata from '@/mixins/pagations'
  import Tables from  '@/components/table'
  export default {
    mixins: [pagationdata],
    name:'OverSpeed',
    data() {
      return {
        operationtype:0,
        tableTitle:[{
          title:'剩余服务时间',
          prop:'remainDays'
        },{
          title:'商品编号',
          prop:'cardId'
        },{
          title:'商品名称',
          prop:'cardName'
        }, {
          title:'商品金额',
          prop:'cash'
        },{
          title:'商品图片',
          prop:'sim'
        },{
          title:'商品类型',
          prop:'type'
        }, {
          title:'商品描述',
          prop:'cardDesc'
        }]
      }
    },
    components:{
      Pagations,
      Tables
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    created() {
      this.fetchData(this.listQuery)
    },
    methods: {
      changePage: function(val) {
        this.fetchData({
          pageSize: 10,
          currentPage: val,
          ...this.formline
        })
      },
      fetchData(data) {
        this.listLoading = true
        queryServiceCardList(data).then(response => {
          if(response && response.body){
            this.list = response.body.cardList
            this.totalCount = response.body.totalCount
          }else {
            this.list = []
            this.totalCount = 0
          }
          this.listLoading = false
        })
      }
    }
  }
</script>
